<!DOCTYPE html>
<link rel="match" href="../expected/clip-path-basic-shapes-ref.html" />
<style>
    .outer {
        margin: 5px;
        width: 130px;
        height: 80px;
        display: inline-block;
        background-color: grey;
    }

    .inner {
        height: 100%;
        background-color: black;
    }
</style>
<div class="outer">
    <div class="inner" style="clip-path: inset(30px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: inset(10px 20px 30px 40px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: inset(20% 30%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: inset(40px 20%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: inset(60% 0 40% 0)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: xywh(10px 20px 30px 40px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: xywh(10% 20% 30% 40%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: xywh(10% 20px 30px 40%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: xywh(10px 20px -30px 40px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: xywh(10px -20px 30px 40px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: rect(0 30% auto 10%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: rect(50px 70px 80% 20%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: rect(10px 0 0 20px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: rect(10px 20px 10px 20px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(50px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(60px at right center)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(10% at 20px 90%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(closest-side at 40px 30px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(farthest-side)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle()"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(at 30% 40px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(farthest-side at -10px -10px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: circle(-10px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(20px 50px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(40px 50% at right center)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(closest-side closest-side at 50px 60px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(farthest-side closest-side at 20% 70%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(closest-side farthest-side at 20% 70%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(closest-side 20% at 20% 70%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(at 40% 70%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(closest-side farthest-side)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(closest-side)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: ellipse(-10% -10px at right)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: polygon(100% 0%, 50% 50%, 100% 100%)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: polygon(65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: polygon(nonzero, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: polygon(evenodd, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px)"></div>
</div>
<div class="outer">
    <div class="inner" style="clip-path: polygon(100px 0%, 50% 50px, 100% 100%)"></div>
</div>
